<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
		<script>
		$(document).ready(function(){
			var slideShow=$(".slideShow"),
				ul=slideShow.find("ul"),
				nav=slideShow.find(".nav span"),
				timer=null,
				iNow=0
				li=ul.find("li");

			ul.hover(function(){				
				clearInterval(timer);					 
			},autoPlay);							

			nav.on("mouseenter",function(){
				var me=$(this),
					index=me.index();

				iNow=index;

				li.eq(iNow).fadeIn(200).siblings("li").fadeOut(200);

				nav.removeClass("active");

				me.addClass("active");

			});

			autoPlay();

			function autoPlay(){
				timer=setInterval(function(){					//每两秒不停调用函数触发鼠标事件来实现轮播
				iNow++;
				if(iNow>nav.length-1){
					iNow=0;
				}
				nav.eq(iNow).trigger("mouseenter");
			},2000);

			}

			

		}); 
		
	</script>
	<style type="text/css">
	*{
		margin:0px;
		padding: 0px;
	}
	ul{
		list-style: none;
	}
	.slideShow{
		position: relative;
		margin: 100px auto;
		height: 454px;
		width: 730px;
		overflow: hidden;
	}
	.slideShow ul{
		position: relative;
		width: 20000px;
	}
	.slideShow ul li{
		position: absolute;					/*图片重合在一起*/
	}
	
	.slideShow .nav{
		text-align: center;
		position: absolute;
		bottom: 10px;
		font-size: 13px;
		color: white;
		font-family: '微软雅黑';
		line-height: 15px;
		margin: 0 auto;
		left: 300px;
		width: 140px;

	}
	.slideShow .nav span{
		-webkit-user-select:none;
		user-select:none;
		float: left;
		cursor: pointer;
		border-radius: 9px;
		display: inline-block;
		width: 15px;
		height: 15px;
		background: #3E3E3E;
		margin-left: 5px;
	}
	.slideShow .nav span.active{
		background: #B61B1F;
	}

	</style>

</head>
<body>
	<div class ="slideShow">
		<ul>
			<li><a href="#"><img src="1.jpg"></a></li>
			<li><a href="#"><img src="2.jpg"></a></li>
			<li><a href="#"><img src="3.jpg"></a></li>
			<li><a href="#"><img src="4.jpg"></a></li>
			<li><a href="#"><img src="5.jpg"></a></li>
			<li><a href="#"><img src="6.jpg"></a></li>
		</ul>
		<div class="nav">
			<span class="active">1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
			<span>6</span>			
		</div>
		
	</div>

</body>
</html>